<template>
	<div class="flow-design">
		<zoom v-model="zoom" />
		<div class="flow-design-layout">
			<div
				class="box-scale"
				id="box-scale"
				:style="{ transform: `scale(${zoom / 100})` }"
				v-if="nodeConfig.nodeName"
			>
				<node-wrap
					:node-config.sync="nodeConfig"
					:flow-permission.sync="flowPermission"
					:is-tried.sync="isTried"
				/>
				<div class="end-node">
					<div class="end-node-circle"></div>
					<div class="end-node-text">流程结束</div>
				</div>
			</div>
		</div>
		<error-dialog ref="tipDialog" :visible.sync="tipVisible" :list="tipList" />
		<promoter-drawer />
		<approver-drawer :directorMaxLevel="directorMaxLevel" />
		<condition-drawer />
		<copyer-drawer />
	</div>
</template>
<script>
import Zoom from "./zoom.vue";
import NodeWrap from "./node-wrap.vue";
import ErrorDialog from "./error-dialog.vue";
import PromoterDrawer from "./promoter-drawer.vue";
import ApproverDrawer from "./approver-drawer.vue";
import ConditionDrawer from "./condition-drawer.vue";
import CopyerDrawer from "./copyer-drawer.vue";
export default {
	name: "oa-flow-design",
	components: {
		Zoom,
		NodeWrap,
		ErrorDialog,
		PromoterDrawer,
		ApproverDrawer,
		ConditionDrawer,
		CopyerDrawer
	},
	props: {
		data: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			zoom: 100,
			processConfig: {},
			nodeConfig: {},
			flowPermission: [],
			directorMaxLevel: 0,
			workFlowDef: {},
			workFlowType: 1,
			isTried: false,
			tipList: [],
			tipVisible: false
		};
	},
	watch: {
		data: {
			deep: true,
			handler(v) {
				this.processConfig = v;
				this.nodeConfig = v.nodeConfig;
				this.flowPermission = v.flowPermission || [];
				this.directorMaxLevel = v.directorMaxLevel;
				this.workFlowDef = v.workFlowDef;
			}
		}
		// nodeConfig: {
		// 	deep: true,
		// 	handler(v) {
		// 		this.reErr(v);
		// 	}
		// }
	},
	created() {},
	methods: {
		submit(cb) {
			this.isTried = true;
			this.tipList = [];
			this.reErr(this.nodeConfig);
			if (this.tipList.length != 0) {
				this.tipVisible = true;
				this.$refs.tipDialog.open();
				cb && cb(this.tipList, null);
				return;
			}
			this.processConfig.flowPermission = this.flowPermission;
			cb && cb(null, this.processConfig);
			// this.$axios.post("", this.processConfig).then(res => {
			//     if (res.code == 200) {
			//         this.$message.success("设置成功");
			//         setTimeout(function () {
			//             window.location.href = ""
			//         }, 200)
			//     }
			// })
		},
		reErr({ childNode }) {
			if (childNode) {
				let {
					type,
					error,
					nodeName,
					conditionNodes,
					nodeUserList,
					operateType
				} = childNode;
				if (type == 1) {
					// console.log(nodeName, error);
					if (error) {
						if (nodeUserList.length == 0) {
							this.tipList.push({ name: nodeName, type: "审核人" });
						}
						if (!operateType || !operateType.length) {
							this.tipList.push({ name: nodeName, type: "操作" });
						}
					}
					this.reErr(childNode);
				} else if (type == 2) {
					if (error) {
						this.tipList.push({ name: nodeName, type: "抄送人" });
					}
					this.reErr(childNode);
				} else if (type == 3) {
					this.reErr(childNode);
				} else if (type == 4) {
					this.reErr(childNode);
					for (let i = 0; i < conditionNodes.length; i++) {
						if (conditionNodes[i].error) {
							this.tipList.push({ name: conditionNodes[i].nodeName, type: "条件" });
						}
						this.reErr(conditionNodes[i]);
					}
				}
			} else {
				childNode = null;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.flow-design {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
	button {
		cursor: pointer;
	}
	::v-deep {
		* {
			box-sizing: border-box;
		}
	}
	&-layout {
		background: #f5f5f7;
		width: 100%;
		position: absolute;
		overflow: auto;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
	}

	.box-scale {
		width: 100%;
		position: relative;
		padding: 54.5px 0;
		display: inline-block;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
		min-width: min-content;
		transform: scale(1);
		transform-origin: top left 0;
		.end-node {
			border-radius: 50%;
			font-size: 14px;
			color: rgba(25, 31, 37, 0.4);
			text-align: left;
			.end-node-circle {
				width: 10px;
				height: 10px;
				margin: auto;
				border-radius: 50%;
				background: #dbdcdc;
			}
			.end-node-text {
				margin-top: 5px;
				text-align: center;
			}
		}
	}
}
</style>
